<template>
  <div 
    class="aheader" 
    :class="{fixed_bg: isFixedBg,}"
  >
    <!-- 顶部消息 -->
    <div class="activity_msg" v-show="isShowMsg">
      <div class="a_inner">
        <router-link :to="{ path: '/activity/subscription', query: { isShoeMsg: 123 }}"  v-text="lang.aText"></router-link>
        <div class="activity_msg_title" v-text="lang.msgText"></div>
        <div 
          class="msg_top_close" 
          @click="closeMsgFun"
        ><img src="../images/msg_top_close.svg" alt="msg_top_close"></div>
      </div>
    </div>

    <div class="h_inner">
      <!-- logo -->
      <div class="h_logo"></div>
      <!-- 导航 -->
      <ul class="h_nav">
        <li 
          v-for="(items, index) in navlist"
          :key="index"
          @click.stop.prevent="navEventFun(items, index)"
          @mouseover="outOverFun(index)" 
          @mouseout="outOutFun(index)"
        >
          <!-- 带语言图标 -->
          <div 
            class="lang_img" 
            v-if="items.isIcon"
          ><img 
            :src="items.child[langKey].icon" 
            :alt="items.child[langKey].text"
          ></div>

          <!-- 下拉多选 -->
          <div class="h_nav_show">
            <a href="javascript:;" v-text="items.child[langKey].text" v-if="items.child.length>2"></a>
            <a href="javascript:;" v-text="lang.navlist[index].text || items.child[langKey].text" v-else></a>
            <label class="drop_down" v-if="items.isSanIcon" ></label>
          </div>
          
          <!-- 下拉内容 -->
          <!-- 用户相关 -->
          <ul class="h_nav_content" v-if="items.enum === 2"  v-show="isShow">
            <li 
              v-for="(val, i) in items.child" 
              :key="val.text+i"
              @click.stop.prevent="logoutFun"
            >                    
              <h6 v-text="lang.headerExct"></h6>
            </li>
          </ul>
          <!-- 多国语言 -->
          <ul class="h_nav_content" v-if="items.enum === 3" v-show="items.isChildSub">
            <li 
              v-for="(val, i) in items.child" 
              :key="val.text"
              @click="switchLanguage(i)"
            >                    
              <div class="child_lang_img"><img :src="val.icon" :alt="val.text"></div>
              <h6 v-text="val.text"></h6>
            </li>
          </ul>
        </li>
      </ul> 

    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import LoginService from '@/service/LoginService.js'

export default {
  props: {
    lang: {
      type: Object,
    },
  },
  data () {
    return {
      isShow: false,
      isShowMsg: true,
      isFixedBg: false,
      // aText: lang.activity.it.header.aText,
      // msgText: lang.activity.it.header.msgText,
      /**
       * enum: 0 当前页面操作 1 跳转至页面操作 2 用户登陆退出操作 3 多国语言操作
       * 
       */
      navlist: [
        { path: '/activity', text: '首页', child: [], isChildSub: false, enum: 1 },
        { path: 'https://www.baidu.com', text: '白皮书', child: [], isChildSub: false,  enum: 1 },
        { path: 'https://cn.vuejs.org', text: 'IT简介', child: [], isChildSub: false, enum: 1 },
        { path: 'ateam', text: '团队介绍', child: [], isChildSub: false, enum: 0 },
        { path: 'ahistory', text: '发展历程', child: [], isChildSub: false, enum: 0 },
        { path: '/', text: 'IDCM', child: [], isChildSub: false, enum: 1 },
        { 
          path: '/', 
          text: '登录', 
          isChildSub: false,
          isSanIcon: true,
          enum: 2,
          child: [
            { text: '退出' },
          ] 
        },
        {
          path: '/', 
          text: '中文', 
          isIcon: true,
          isLang: true,
          enum: 3,
          isChildSub: false,
          isSanIcon: true,
          // child: [
          // 	{ icon: require('../images/lang/en.png'), text: 'English', name: 'en' },
          // 	{ icon: require('../images/lang/zh-CN.png'), text: '简体中文', name: 'zh-CN' },
          // 	{ icon: require('../images/lang/zh-Hant.png'), text: '繁體中文', name: 'zh-Hant' },
          // 	{ icon: require('../images/lang/ja.png'), text: '日本語', name: 'ja' },
          // 	{ icon: require('../images/lang/ko.png'), text: '한국어', name: 'ko' },
          // 	{ icon: require('../images/lang/fr.png'), text: 'français', name: 'fr' },
          // 	{ icon: require('../images/lang/nederlands.png'), text: 'Nederlands', name: 'nl' },
          // 	{ icon: require('../images/lang/spain.png'), text: 'Español', name: 'en' },
          // 	{ icon: require('../images/lang/vi.png'), text: 'Tiếng Việt', name: 'vi' },
          // ], 
          
          child: {
            'en': { icon: require('../images/lang/en.png'), text: 'English', },
            'zh-CN': { icon: require('../images/lang/zh-CN.png'), text: '简体中文', },
            'zh-Hant': { icon: require('../images/lang/zh-Hant.png'), text: '繁體中文', },
            'ja': { icon: require('../images/lang/ja.png'), text: '日本語', },
            'ko': { icon: require('../images/lang/ko.png'), text: '한국어', },
            'fr': { icon: require('../images/lang/fr.png'), text: 'français', },
            'nl': { icon: require('../images/lang/nederlands.png'), text: 'Nederlands', },
            // 'sp': { icon: require('../images/lang/spain.png'), text: 'Español', },
            'vi': { icon: require('../images/lang/vi.png'), text: 'Tiếng Việt', },
          }
        },
      ],
      currentLangIndex: 0, //当前语言包
      currentLanguage: '',
    }

  },
  computed: {
    
    getHistoryHeight(){
      return (document.getElementsByClassName('ahistory')[0].offsetTop - 140)
    },
    ...mapGetters({
      langKey: 'langKey',
      mixUserInfo: 'userInfo',
      customInfo: 'customInfo'
    }),
  },
  watch: {
    // langKey () {
    //   // 重新初始化
    //   this.currentLanguage = this.languageList[this.langKey]
    // }
  },
  created(){

    /**
     *  初始化数据
     * 是否登录状态
     */
    this.navlist[this.navlist.length-1].text = this.navlist[this.navlist.length-1].child[this.langKey].text
    
    if(this.mixUserInfo.Account){
      this.navlist[this.navlist.length-2] = { 
        path: '/', 
        text: this.mixUserInfo.Account, 
        isChildSub: false,
        isSanIcon: true,
        enum: 2,
        child: [
          { text: '退出' },
        ] 
      }
    }else{
      this.navlist[this.navlist.length-2] = { 
        path: '/user/login?from=activityIndex', 
        text: '登录', 
        isChildSub: false,
        isSanIcon: false,
        enum: 1,
        child: [] 
      }
    }
  },
  mounted () {
    
    this.$nextTick(()=> {
      window.addEventListener('scroll', this.onScroll)
      // 点击空白 关闭语言框
      document.addEventListener('click', this.hideLangList)
    })
  },
  watch: {
    $route(){
      console.log('----------------------------*****');
      
    }
  },
  methods: {
    outOverFun(index){
      index === this.navlist.length-2 ? this.isShow = true : ''
    },
    outOutFun(index){
      index === this.navlist.length-2 ? this.isShow = false : ''
    },
    closeMsgFun(){
      this.isShowMsg = false
    },
    hideLangList(){
      console.log('点击空白 关闭语言框')
      this.navlist[7].isChildSub = false
    },
    
    //导航事件
    navEventFun(item, index){
      
      // 非0的情况
      if(item.enum){
        // 跳转
        if(item.enum === 1){
          // 判断是否http
          if(!/http/.test(item.path)){
            this.$router.push({
              path: item.path
            })
          }else{
            window.location = item.path
          }
        }else if(item.enum === 2){
          console.log('用户唤起退出')
          this.isShow = true
          // this.navlist[index].isChildSub = !this.navlist[index].isChildSub
          // return
        }else if(item.enum === 3){
          this.navlist[index].isChildSub = !this.navlist[index].isChildSub
          return
        }else{
          console.log('点击导航不知道跳转哪儿了')
        }
      }else{
        console.log(12121)
        document.documentElement.scrollTop = this.getHeight(item.path)
        return
      }

    },
    logoutFun(){
      this.isShow = false
      LoginService.logout()
      // this.$router.push({path: '/user/login'})
      this.navlist[this.navlist.length-2] = { 
        path: '/user/login?from=activityIndex', 
        text: '登陆', 
        isChildSub: false,
        isSanIcon: false,
        enum: 1,
        child: [] 
      }
      console.log("退出登陆")
    },
    changeLangFun(index){
      this.currentLangIndex = index
    },
    switchLanguage (language) {
      this.navlist[this.navlist.length-1].text = this.navlist[this.navlist.length-1].child[language].text
      // 更改语言
      this.switchLang(language)
    },
    onScroll(){
      // Chrome： document.body.scrollTop
      // Firefox： document.documentElement.scrollTop
      let scrolled = document.documentElement.scrollTop || document.body.scrollTop
      this.isFixedBg = scrolled >= 100 ? true : false
    },

    ...mapActions([ 'switchLang' ]),

    // 获取锚点高度
    getHeight(className){
      return (document.getElementsByClassName(className)[0].offsetTop - 144)
    },
  },
  
}
</script>

<style lang="stylus">
.aheader 
  position: fixed
  left: 0
  top: 0
  z-index: 50
  width: 100%
  transition: all 0.4s
  &.fixed_bg
    background-color: rgba(0, 0, 0, 0.9)
    // background-image: linear-gradient(-180deg, #060C26 0%, rgba(6,13,37,0.00) 100%)
    // background: #14141c
  .h_inner
    width: 1200px
    height: 80px
    margin: 0 auto
    .h_logo
      float: left
      height: 80px
      width: 150px
      background:url("../images/it_header_logo.svg") no-repeat left center
      background-size: contain
    .h_nav
      float: right
      height: 80px
      &>li
        position: relative
        float: left
        padding: 30px 0 0 0px
        margin-left: 40px
        line-height: 0px
        font-size: 0
        cursor: pointer
        .lang_img
          float: left
          vertical-align: middle
          margin-right: 6px
          padding-top: 3px
          img
            width: 22px
            height: 14px
        .h_nav_show
          float: left
          &>a
            vertical-align: middle
            display: inline-block
            line-height: 20px
            font-size: 14px
            color: #fff
          .drop_down
            vertical-align: middle
            display: inline-block
            height: 5px
            width: 7.5px
            margin-left: 6px
            // margin-top: 6px
            background:url("../images/san_d.svg") no-repeat left center
            background-size: cover
          .drop_down_h
            background-image: url("../images/san_h.svg")
        .h_nav_content
          position: absolute
          left: 0
          top: 50px
          width: 145px
          padding: 6px 0
          border-radius: 4px
          background-color: rgba(0, 0 ,0, 0.85)
          &>li
            height: 20px
            padding: 10px 0 10px 24px
            .child_lang_img
              float: left
              img
                height: 20px
            &:hover
              background-color: #252B44
            h6
              float: left
              margin-left: 10px
              font-size: 12px
              line-height: 20px
              color: #fff
  .activity_msg
    position: relative
    z-index: 100
    background-color: rgba(0, 0, 0, 0.3)
    background-image: linear-gradient(-180deg, #060C26 0%, rgba(6,13,37,0.00) 100%)
    .a_inner
      width: 1200px
      margin: 0 auto
      position: relative
      overflow: hidden
      height: 50px
      .activity_msg_title
        float: right
        width: 636px
        line-height: 24px
        padding: 13px 0
        font-size: 16px
        text-align: center
        color: #FFFFFF
      &>a
        float: right
        width: 404px
        padding: 13px 0
        line-height: 24px
        font-size: 16px
        text-align: left
        text-decoration: underline
        color: #69F3FF
      .msg_top_close
        position: absolute
        right: 0
        top: 0
        padding: 15px 0
        opacity: 0.5
        cursor: pointer
      
    

</style>
